<template>
	<div>
		<div id="summernote" v-el:note>{{content}}</div>
		<div class="text-right" style="color:#777;margin-top:-10px" v-if="isFit()">您还能输入{{placeholder}}字</div>
		<div class="text-right" style="color:#dd4b39;margin-top:-10px" v-else>输入超过字数限制{{_placeholder}}字</div>
		<photo-picker v-ref:picker></photo-picker>
	</div>
</template>

<style lang="css" src="summernote-webpack-fix/dist/summernote.css"></style>
<script>
	import 'summernote-webpack-fix/dist/summernote.js';
	import 'summernote-webpack-fix/dist/lang/summernote-zh-CN.js';

	import photoPicker from './summernote.photo.vue'

	export default {
		components: {
			'photo-picker': photoPicker
		},
		props: {
			content: {
				type: String
			},
			disabled: {
				type:Boolean,
				default:false
			},
			max: {
				type: String,
				default: function() {
					return "3000"
				}
			},
			placeholder: {
				type: String,
				twoWay: true,
				default: function() {
					return this.max
				}
			},
			height: {
				type:String,
				default:48
			},
			width:{
				type:String,
				default:"100%"
			}
		},
		computed: {
			_placeholder() {
				return Math.abs(this.placeholder);
			}
		},
		methods: {
			isFit() {
				let num = parseInt(this.placeholder);
				return (num>=0)?true:false;
			},
			get() {
				return $(this.$els.note).summernote('code');
			},
			change() {
				let content = this.content;
				$(this.$els.note).summernote('code',content);
				if(content) {
					let max = parseInt(this.max);
					let text = content.replace(/(<([^>]+)>)/ig,"");
					let num = text.length;
					this.$set("placeholder",max-num)
				} else {
					this.$set("placeholder",this.max)
				}
			},
			reset() {
				this.content = "";
				$(this.$els.note).summernote('code',"");
				this.$set("placeholder",this.max)
			}
		},
		 events: {
			 insert(arg) {
				 $(this.$els.note).summernote('insertImage',arg.url,arg.name);
			 }
		 },
		ready() {
			let self = this;
			if(this.disabled){
				$(this.$els.note).summernote("disable")
			}
			let PhotoButton = function (context) {
				let ui = $.summernote.ui;
				// create button
				let button = ui.button({
					contents: '<i class="note-icon-picture"/>',
					tooltip: '图片',
					click: function () {
						self.$refs.picker.init();
//						self.$refs.picker.$on("insert",function(arg){
//							$(self.$els.note).summernote('insertImage',arg.url,arg.name);
//						})
					}
				});
				return button.render();
			}

  		$(this.$els.note).summernote({
				lang: 'zh-CN',
				width:self.width,
				minHeight : 48,
				height:self.height,
				dialogsInBody: true,
				toolbar: [
					['style', ['style']],
					['font', ['bold', 'italic', 'underline', 'clear']],
					['fontname', ['fontname']],
					['color', ['color']],
					['para', ['ul', 'ol', 'paragraph']],
					['table', ['table']],
					// ['insert', ['link','photo', 'video']],
					['view', ['fullscreen', 'help']]
				],
				fontNames: [
					'Microsoft YaHei','Arial', 'Arial Black', 'Comic Sans MS', 'Courier New',
					'Helvetica Neue', 'Helvetica', 'Impact', 'Lucida Grande',
					'Tahoma', 'Times New Roman', 'Verdana'
				],
				buttons: {
					photo: PhotoButton
				},
				//placeholder: "",
				//2046
				callbacks: {
					onKeydown:function(e){
						let text = $(self.$els.note).summernote('code').replace(/(<([^>]+)>)/ig,"");
			            let num = text.length;
			            let key = e.keyCode;
			            let allowed_keys = [8, 37, 38, 39, 40, 46]
									let max = parseInt(self.max);
			            if($.inArray(key, allowed_keys) != -1) {
			               return true
									}
			            else if(num > max){
			                e.preventDefault();
			                e.stopPropagation()
			            }
			           },
					onChange:function(content) {
						let max = parseInt(self.max);
						let text = content.replace(/(<([^>]+)>)/ig,"");
						let num = text.length;
						self.$set("placeholder",max-num);
						self.$set("content",content);
					}
				},

			});
			//计算可输入字数
			let max = parseInt(this.max);
			let content = this.content;
			if(content) {
				let text = content.replace(/(<([^>]+)>)/ig,"");
				let num = text.length;
				this.$set("placeholder",max-num)
			}

		},
		beforeDestroy(){
			$ (this.$els.note).summernote('destroy');
		}
	}
</script>
